<template>
  <div class="gm-rz">
    <loading v-if="!rzData" />
    <div class="rz" v-else-if="rzData.length">
      <ul class="item">
        <li v-for="data in rzData" :key="data.id" class="list">
          <div class="photo" @click="openDrawer(data)" :style="setImage(data.url)"></div>
          <div class="desc-wrapper">
            <div class="title">
              <i v-if="data.hot" class="el-icon-star-on"></i>
              <span>{{ data.label }}</span>
            </div>
            <div class="desc">
              <span>更新时间：{{ data.updated | setDate }}</span>
              <el-button size="mini" @click="openDrawer(data)">点击查看 >></el-button>
            </div>
          </div>
        </li>
      </ul>
      <el-drawer
        :visible.sync="drawer"
        :with-header="false"
        v-if="drawerData.label"
        size="50%"
        class="drawer"
      >
        <div class="img">
          <img :src="drawerData.url | setImageUrl" alt />
        </div>
        <div class="detail">
          <div class="label">
            <p>
              <i v-if="drawerData.label" class="el-icon-star-on"></i>
              {{drawerData.label}}
            </p>
            <p class="time">
              上传时间：
              <i>{{drawerData.created | setDate}}</i>
            </p>
          </div>
          <div class="body">
            <p>{{drawerData.body}}</p>
          </div>
        </div>
      </el-drawer>
    </div>
    <div class="info-text" v-else>
      <p>
        <i class="el-icon-document"></i>
      </p>
      <p>
        没有获取到您的
        <span>日志</span>数据，请前往导航栏的管理数据-
        <span>日志操作</span>版块进行完善。
      </p>
      <p>
        <router-link to="/users/gm_rz">或者点击这里完善资料</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import { setImage } from "@/public/setBgImage.js";
import { mapState, mapActions } from "Vuex";
export default {
  name: "gm-rz",
  data() {
    return {
      drawer: false,
      drawerData: {}
    };
  },
  mounted() {
    this.setImage = setImage;
    // 这里最先执行，然后执行获取userName，最后再执行watch的userName
    if (this.userName) {
      if (!this.rzData.length) {
        this.getRzData(this.userName);
      }
    }
  },
  watch: {
    userName() {
      if (this.userName) {
        if (!this.rzData.length) {
          this.getRzData(this.userName);
        }
      }
    }
  },
  methods: {
    openDrawer(data) {
      this.drawerData = data;
      this.drawer = true;
    },
    ...mapActions("user", ["getRzData"])
  },
  computed: {
    ...mapState("user", ["rzData", "userName"])
  }
};
</script>


<style lang="sass" scoped>
@import '@/assets/default.sass'
.gm-rz
  width: 100%
  height: 100%
  background-color: #fff
  .info-text
    width: 100%
    height: 100%
    padding: 20%
    @include align(flex-start)
    >p
      flex: 0 0 100%
      width: 100%
      height: 40px
      line-height: 40px
      font-size: 16px
      overflow: hidden
      >a
        color: #0487dc
        &:hover
          color: #2eb037
      >i
        font-size: 24px
      >span
        color: #2eb037
  .rz
    width: 100%
    background-color: #fff
    .item
      width: 100%
      .list
        width: 100%
        padding: 20px
        border-bottom: 1px solid #f6f6f6
        @include flex(space-between,flex-start)
        .photo
          flex: 0 0 18%
          height: 100px
          overflow: hidden
          cursor: pointer
          @include setbackground()
          &:hover
            background-size: contain
          img
            width: 100%
        .desc-wrapper
          flex: 0 0 78%        
          .title
            width: 100%
            height: 40px
            line-height: 40px
            @include flex(flex-start,center)
            >i
              color: #f44444
              font-size: 21px
              margin-right: 10px
            >span
              font-size: 21px
              color: #3d3d3d
              font-weight: 700
          .desc
            width: 100%
            height: 40px
            line-height: 40px
            @include flex(space-between,center)
            >img
              width: 26px
              height: 26px  
    .drawer
      .img
        width: 100%
        padding: 5%
        height: 80vh
        overflow: hidden
        @include flex(center,center)
        img
          max-height: 100%
          max-width: 100%
      .detail
        width: 100%
        padding: 5%
        height: 20vh
        background-color: #eee
        .label
          width: 100%
          height: 40px
          line-height: 40px
          font-size:18px
          @include flex(space-between,center)
          .time
            font-size: 14px
            i
              color: #eb2001
        .body
          width: 100%
          height: 60px
          padding-top: 10px
          @include align(center)
          >p
            overflow: hidden
            -webkit-line-clamp: 2
            display: -webkit-box
            color: #999
            line-height: 25px
            -webkit-box-orient: vertical
            width: 100%
</style>